import React, { Component } from 'react';
import { Animated, ScrollView, View, Image, StatusBar, Text, TouchableOpacity, FlatList, RefreshControl, DeviceEventEmitter, Platform } from 'react-native';
import TabBarTitle from './TabBarTitle';
import Colors from '../constants/Colors';
import RefreshFooter from './RefreshFooter';
import EmptyView from './EmptyView';

export default class MyListView extends Component {

    constructor(props) {
        super(props)
        this.state = {
            refreshing: false,
            showFoot: 0,//显示上拉加载更多
        }
        this.page = 1;
    }

    componentDidMount() {

    }

    componentWillUnmount() {

    }

    render() {
        return (
            <FlatList
                style={[{ alignSelf: 'stretch', flex: 1 }, this.props.style]}
                keyExtractor={(item, index) => {
                    return index.toString()
                }}
                numColumns={this.props.numColumns}
                showsVerticalScrollIndicator={false}
                data={this.props.list}
                ListHeaderComponent={this.props.ListHeaderComponent}
                ListEmptyComponent={() => {
                    if (this.props.EmptyView) {
                        return this.props.EmptyView
                    } else {
                        return (<EmptyView />)
                    }
                }}
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.refreshing}
                        onRefresh={this.onRefresh.bind(this)}
                        colors={[Colors.headerColor]}
                        progressBackgroundColor="#ffffff"
                    />
                }
                renderItem={this.props.renderItem}
                ListFooterComponent={this.props.ListFooterComponent ? this.props.ListFooterComponent : <RefreshFooter showFoot={this.state.showFoot} />}
                onEndReachedThreshold={0.1}
                onEndReached={this.props.canLoadMore ? this.onLoadMore.bind(this) : null}
            />
        )
    }


    //刷新
    onRefresh() {
        this.setState({
            refreshing: true,
        });
        this.page = 1;
        this.getList();
    }

    //加载更多
    onLoadMore() {
        console.log('onLoadMore:' + this.state.showFoot);
        //如果是正在加载中或没有更多数据了，则返回
        if (this.state.showFoot != 0) {
            return;
        }
        //底部显示正在加载更多数据
        this.page++;
        this.setState({
            showFoot: 2,
        })
        this.getList();
        //获取数据
    }

    //获取
    getList() {
        this.props.getList ? this.props.getList(this.page) : null
    }

    //加载更多后有不止10条的数据和刷新时候完成调用
    onHasMore() {
        this.setState({
            refreshing: false,
            showFoot: 0
        })
    }

    //加载更多后没有数据了调用
    onNoMore() {
        this.setState({
            refreshing: false,
            showFoot: 1
        })
    }
}